<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>确认订单</title>
    <link rel="stylesheet" href="style/common.css"/>
    <link rel="stylesheet" href="style/cart.css"/>
</head>
<body>

<!--start-->
<div class="techbook order">
    <!--head-->
    <div class="head head_cart">
        <div class="top">
            <div class="wrap">
                <div class="fl">51TechBook.com，为技术而生！</div>
                <div class="fr">
                    <p class="fl">Hi，<a href="" class="username">张三</a><a href="" class="logout">[退出]</a></p>

                    <div class="fr topMenu">
                        <dl>
                            <dt>
                                <a href="">我的订单</a>
                            </dt>
                        </dl>
                        <dl class="more">
                            <dt>
                                <a href="">个人中心</a>
                            </dt>
                            <dd>
                                <a href="">个人信息</a><a href="">安全中心</a><a href="">收货地址</a><a href="">等待添加</a>
                            </dd>
                        </dl>
                        <dl class="cart">
                            <dt><a href="">购物车<i>16</i></a></dt>
                        </dl>
                        <dl class="more">
                            <dt>
                                <a href="">我是商家</a>
                            </dt>
                            <dd>
                                <a href="">我是商家</a>
                                <a href="">我是商家</a>
                                <a href="">我是商家</a>
                            </dd>
                        </dl>
                        <dl class="more">
                            <dt>
                                <a href="">客户服务</a>
                            </dt>
                            <dd>
                                <a href="">消费服务</a>
                                <a href="">商家服务</a>
                            </dd>
                        </dl>
                        <dl class="more">
                            <dt>
                                <a href="">更多</a>
                            </dt>
                            <dd>
                                <a href="">更多</a>
                                <a href="">更多</a>
                                <a href="">更多</a>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>


        <div class="bot">
            <div class="wrap">
                <div class="left fl">
                    <a href="" class="logo"><img src="img/front/about_logo.jpg" alt=""></a>
                </div>
                <div class="cart_step step_2 fr">
                    <span>购物车</span><span>确认订单</span><span>支付完成</span>
                </div>
            </div>
        </div>

    </div>
    <!--head End-->

    <!--body-->
    <div class="body">
        <div class="wrap">
            <div class="orderAddress">
                <div class="title">
                    <h3>收货人信息</h3>
                    <a href="">返回修改购物车</a>
                </div>
                <div class="addressTab tab">
                    <div class="tabs">
                        <ul class="list">
                            <li class="tab tabCurr">管理收货地址</li>
                            <li class="tab">使用新地址</li>
                        </ul>
                    </div>
                    <div class="tabCons bgWhite">
                        <div class="tabCon addresslist tabConCurr" id="addresslist">
                            <ul class="list">
                                <li>
                                    <div class="op"><span class="set">设为默认地址</span><span>编辑</span><span class="del">删除</span></div>
                                    <span>王小二</span>
                                    <em>湖北省 武汉市 洪山区 大庆路80号</em>
                                    <i>15912345678</i>
                                </li>
                                <li>
                                    <div class="op"><span class="set">设为默认地址</span><span>编辑</span><span class="del">删除</span></div>
                                    <span>王小二</span>
                                    <em>湖北省 武汉市 洪山区 大庆路80号</em>
                                    <i>15912345678</i>
                                </li>
                                <li>
                                    <div class="op"><span class="set">设为默认地址</span><span>编辑</span><span class="del">删除</span></div>
                                    <span>王小二</span>
                                    <em>湖北省 武汉市 洪山区 大庆路80号</em>
                                    <i>15912345678</i>
                                </li>
                            </ul>
                            <span class="toggle">收起地址</span>
                        </div>
                        <div class="tabCon addAddress">

                            <dl>
                                <dt>收货人姓名<em>*</em></dt>
                                <dd><input type="text" value="长度不超过25个字符" class="ipt w0"/><span class="err">手机格式不正确</span></dd>
                            </dl>
                            <dl>
                                <dt>所在地区<em>*</em></dt>
                                <dd>
                                    <select>
                                        <option value="">省/直辖市</option>
                                        <option value="">==</option>
                                    </select>
                                    <select>
                                        <option value="">市</option>
                                        <option value="">==</option>
                                    </select>
                                    <select>
                                        <option value="">区/县</option>
                                        <option value="">==</option>
                                    </select>
                                    <select>
                                        <option value="">乡镇/街道</option>
                                        <option value="">==</option>
                                    </select>
                                    <span class="err">手机格式不正确</span>
                                </dd>
                            </dl>
                            <dl>
                                <dt>详细地址<em>*</em></dt>
                                <dd>
                                    <textarea>建议您如实填写详细收货地址</textarea>
                                    <span class="err">手机格式不正确</span>
                                </dd>
                            </dl>
                            <dl>
                                <dt>邮政编码</dt>
                                <dd><input type="text" value="如不清楚，请填写000000" class="ipt w02"/></dd>
                            </dl>
                            <dl>
                                <dt>手&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机<em>*</em></dt>
                                <dd><input type="text" value="手机号" class="ipt w02"/><span class="err">手机格式不正确</span></dd>
                            </dl>
                            <dl>
                                <dt>备用电话</dt>
                                <dd><input type="text" value="手机号/区号-固定电话" class="ipt w02"/></dd>
                            </dl>
                            <dl>
                                <dt>&emsp;</dt>
                                <dd class="set"><label><input type="checkbox"/><span>设置为默认收货地址</span></label></dd>
                            </dl>
                            <dl class="save">
                                <dt>&emsp;</dt>
                                <dd><input type="submit" value="保 存"/></dd>
                            </dl>
                            <div class="cb"></div>

                        </div>
                    </div>
                </div>


                <div class="confirm">
                    <b>确认订单信息</b>
                    <a href="" class="back">返回修改购物车</a>
                </div>

                <dl class="orderList">
                    <dt>
                        <b>智慧图书专营店</b>
                        <span class="info">商品信息</span>
                        <span class="price">单价（元）</span>
                        <span class="qty">数量</span>
                        <span class="total">金额（元）</span>
                    </dt>
                    <dd>
                        <dl class="goods">
                            <dd>
                                <div class="img"><img src="img/example/book_99x99.jpg" alt=""/></div>
                                <div class="name"><a href="">智慧图书专营店，智慧图书专营店，智慧图书专营店，智慧图书专营店。</a></div>
                                <div class="price">￥56.00</div>
                                <p class="qty">3</p>
                                <p class="total">￥86.00</p>
                            </dd>
                            <dt>
                                <div class="msg fl">
                                    <span>买家留言：</span>
                                    <input type="text" value="选填，可填写您和卖家达成一致的要求" />
                                </div>
                                <div class="total fr">
                                    <b>店铺合计（含运费）：</b>
                                    <strong>￥86300</strong>
                                </div>
                            </dt>
                        </dl>
                    </dd>
                </dl>

                <dl class="orderList">
                    <dt>
                        <b>智慧图书专营店</b>
                        <span class="info">商品信息</span>
                        <span class="price">单价（元）</span>
                        <span class="qty">数量</span>
                        <span class="total">金额（元）</span>
                    </dt>
                    <dd>
                        <dl class="goods">
                            <dd>
                                <div class="img"><img src="img/example/book_99x99.jpg" alt=""/></div>
                                <div class="name"><a href="">智慧图书专营店，智慧图书专营店，智慧图书专营店，智慧图书专营店。</a></div>
                                <div class="price">￥56.00</div>
                                <p class="qty">3</p>
                                <p class="total">￥86.00</p>
                            </dd>
                            <dd>
                                <div class="img"><img src="img/example/book_99x99.jpg" alt=""/></div>
                                <div class="name"><a href="">智慧图书专营店，智慧图书专营店，智慧图书专营店，智慧图书专营店。</a></div>
                                <div class="price">￥56.00</div>
                                <p class="qty">3</p>
                                <p class="total">￥86.00</p>
                            </dd>
                            <dt>
                                <div class="msg fl">
                                    <span>买家留言：</span>
                                    <input type="text" value="选填，可填写您和卖家达成一致的要求" />
                                </div>
                                <div class="total fr">
                                    <b>店铺合计（含运费）：</b>
                                    <strong>￥86300</strong>
                                </div>
                            </dt>
                        </dl>
                    </dd>
                </dl>

                <div class="payBox">
                    <div class="fl to">王小二湖北省 武汉市 洪山区 大庆路80号</div>
                    <div class="fr">
                        <em>应付金额：</em>
                        <strong>￥ 138.00</strong>
                        <a href="">去结算</a>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!--body End-->

    <!--foot-->
    <div class="foot">
        <div class="copyright">
            <p class="wrap">Copyright&nbsp;&copy;&nbsp;2013-2018&nbsp;武汉创远达信息技术有限公司版权所有&emsp;鄂ICP备14008188-1号</p>
        </div>
    </div>
    <!--foot End-->

</div>
<!--End-->

</body>
<script src="script/jquery.js"></script>
<script src="script/plug.js"></script>
<script src="script/common.js"></script>
<script>
$(function(){
    //Tab
    $('.tab').tab();

    //管理收货地址
    ;(function () {
        var $list=$('#addresslist'),$ul=$list.find('ul');

        //高亮
        $list.on({
            mouseenter: function () {
                $(this).addClass('hl');
            },
            mouseleave: function () {
                $(this).removeClass('hl');
            }
        },'li');

        //设置为默认
        $list.on('click','.set', function () {
            $(this).closest('li').addClass('selected').siblings().removeClass('selected');
        });

        //删除
        $list.on('click','.del', function () {
            $(this).closest('li').slideUp();
        })

        //收起地址
        $list.on('click','.toggle', function () {
            $(this).toggleClass('close');
            $ul.toggle();
        });
    })();
});
</script>
</html>